<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-01 16:39:03
 * @LastEditors: 171
 * @LastEditTime: 2022-09-01 23:07:46
-->
<script setup lang='ts'>

  import { onMounted } from 'vue';
  import { storeToRefs } from 'pinia'
  import * as echarts from 'echarts'; // echarts需要导出成一个对象
  import useStore from '../../stores'


  const { listState } = useStore()

  // 使用storeToRefs可以保证解构出来的数据也是响应式的
  const { chinaAdd, chinaTotal, cityDetail } = storeToRefs(listState) 

  const initPie = () => {
    const charts = echarts.init(document.getElementsByClassName('display-pie')[0] as HTMLElement)
    const option = {
      backgroundColor: '#223651',
      title: {
        text: '新增确诊人数Top10城市',
        // subtext: 'Fake Data',
        left: 'center',
        padding: 10,
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      // legend: {
      //   top: '5%',
      //   left: 'center',
      //   textStyle: {
      //     color: '#fff'
      //   }
      // },
      series: [
        {
          name: '新增确诊',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            // position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: cityDetail.value.map(city=>{
            return {
              name: city.city,
              value: city.local_confirm_add
            }
          })
        }
      ]
    };
    charts.setOption(option);
  }

  const initLine = () => {
    const charts = echarts.init(document.getElementsByClassName('display-line')[0] as HTMLElement)
    charts.setOption({
      backgroundColor: '#223651',
      tooltip: {
        trigger: "axis"
      },
      xAxis: {
        type: 'category',
        data: cityDetail.value.map(city => city.city),
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      label: {
        show: true
      },
      series: [
        {
          data: cityDetail.value.map(city => city.local_wzz_add),
          type: 'line',
          smooth: true
        }
      ]
    });
  }

  onMounted(() => {
    initPie();
    initLine();
  })
  
</script>

<template>

  <div class="display">
    <div class="display-card">
      <section>
        <div>较上日 + {{chinaAdd.localConfirmH5}}</div>
        <div>{{chinaTotal.localConfirm}}</div>
        <div>本土现有确诊</div>
      </section>
      <section>
        <div>较上日 + {{chinaAdd.nowConfirm}}</div>
        <div>{{chinaTotal.nowConfirm}}</div>
        <div>现有确诊</div>
      </section>
      <section>
        <div>较上日 + {{chinaAdd.confirm}}</div>
        <div>{{chinaTotal.confirm}}</div>
        <div>累计确诊</div>
      </section>
      <section>
        <div>较上日 + {{chinaAdd.noInfect}}</div>
        <div>{{chinaTotal.noInfect}}</div>
        <div>无症状感染者</div>
      </section>
      <section>
        <div>较上日 + {{chinaAdd.importedCase}}</div>
        <div>{{chinaTotal.importedCase}}</div>
        <div>境外输入</div>
      </section>
      <section>
        <div>较上日 + {{chinaAdd.dead}}</div>
        <div>{{chinaTotal.dead}}</div>
        <div>累计死亡</div>
      </section>
    </div>
    <div class="display-pie"></div>
    <div class="display-line"></div>
  </div>

</template>

<style scoped lang='less'>
  .display{
    width: 400px;
    color: #fff;
    overflow-y: auto;
    &-card{
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      section{
        background-color: #223651;
        border: 1px solid black;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        div{
          white-space: nowrap;
        }
        div:nth-child(2){
          color: #369df2;
          padding: 10px 0;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    &-pie{
      height: 350px;
      margin-top: 20px;
    }
    &-line{
      height: 350px;
      margin-top: 20px;
    }
  }
</style>